<template>
  <div class="about_index">
    <div class="about_item">
        <img src="@/assets/img/aboutusBanner.jpg" class="banner_bg" />
        <div class="about_center">
            <div class="about_left">
                <div class="about_title">关于我们</div>
                <div class="about_content">中国电子“两平台一工程”的重要载体，作为推动智能制造、工业互联网产业发展的平台公司</div>
            </div>
        </div>
    </div>
    <div class="section">
      <div class="center">
        <div class="title">公司简介</div>
        <p>&emsp;&emsp;中电工业互联网有限公司于2018年9月在长沙成立，由中国电子和长沙市政府央地共建，注册资金10亿元，是中国电子"两平台一工程"的重要支撑单位，作为推动智能制造、工业互联网产业发展的平台公司，中电互联将"平台布局、安全为本、产融结合、联盟创新"作为企业发展战略，秉承"帮甲方增毛利，帮乙方拓市场，助政府建共享，帮园区上水平"的商业理念，重点打造以网络安全PK体系为特色的国家级平台，力争成为跨行业、跨领域的国家级工业互联网平台。</p>
        <img src='@/assets/img/synopsisImg.png' class="synopsisImg"/>
      </div>
    </div>
    <div class="section1">
      <div class="center">
        <div class="title">公司简介</div>
        <div class='honour_box'>
            <div class='honour_card'>
                <div class='honour_up'>
                    <img src='@/assets/img/scientific.png' class='honour_img'/>
                    <h5 class='honour_title'>科技创新</h5>
                </div>
                <div class='honour_down'>
                <p class='honor_details'>“SMTOS工业互联网平台关键技术研发及应用”被鉴定为国际先进水平</p>
                <p class='honor_details'>“中电工业电子商务平台研发及区块链应用”被鉴定为国际先进水平</p>
                <p class='honor_details'>2019年申请发明专利7项，获批软著58项</p>
                <p class='honor_details'>2018年申请发明专利38项，获批软著29项</p>
                <p class='honor_details'>获批工信部“2018年制造业与互联网融合发展试点示范项目”</p>
                <p class='honor_details'>获批工信部“2018年工业互联网平台集创新应用试点示范项目”</p>
                <p class='honor_details'>长沙工业云平台入选湖南省省级工业互联网平台计划</p>
                <p class='honor_details'>湖南省2018年度优秀工业APP</p>
                </div>
            </div>
            <div class='honour_card'>
                <div class='honour_up'>
                    <img src='@/assets/img/works.png' class='honour_img'/>
                    <h5 class='honour_title'>荣誉资质</h5>
                </div>
                <div class='honour_down'>
                <p class='honor_details'>湖南省两化融合管理体系贯标推荐咨询服务机构</p>
                <p class='honor_details'>湖南省SMT行业联盟理事长单位</p>
                <p class='honor_details'>CFCA中国金融认证中心授权书</p>
                <p class='honor_details'>中国电子信息行业联合会人工智能制造业技术与创新应用产业连盟</p>
                <p class='honor_details'>中电互联奇安信工业互联网安全中心</p>
                <p class='honor_details'>中电九天被工信部评为2018年度智能制造系统解决方案供应商</p>
                <p class='honor_details'>中电九天获中国电子学会科学技术奖二等奖</p>
                <p class='honor_details'>中电九天荣获中国新型显示产业链发展突出贡献奖</p>
                <p class='honor_details'>长智院获批湖南省两化融合管理体系贯标推荐咨询服务机构</p>
                <p class='honor_details'>中电智能获批江苏省工业互联网服务资源池单位</p>
                </div>
            </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="center">
        <div class="title">平台简介</div>
            <p>&emsp;&emsp;中电云网完全采用中国电子PK体系，打造第一个基于PK体系的国家级工业互联网平台，总体目标是提供完整的、通用的工业APP运行、计算及各行业子云的基础运行环境，以微服务为基础运行单元，通过容器、微服务、云原生等前沿技术，打造完整的工业APP开发、部署、运行、运维等全生态平台。</p>
            <p>&emsp;&emsp;平台是从下到上完成数据采集、汇聚、分析、应用的服务体系，提供完整可靠的设备连接、工业APP运行环境、工业APP服务、工业大数据、DEVOPS等服务，根据行业属性聚集形成对应的行业子云或者区域子云，为解决区域资源优化配置、行业转型升级提供支撑。</p>
      </div>
    </div>
    <div class="section1">
      <div class="center">
        <div class="title">联系地址</div>
        <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true">
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
            <bm-marker :position="center" :dragging="true" @click="infoWindowOpen">
                <bm-info-window :position="center" title="中电工业互联网有限公司" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
                <p v-text="infoWindow.contents"></p>
                </bm-info-window>
            </bm-marker>
        </baidu-map>
      </div>
    </div>
    <div class="section2">
        <el-button class="au_but">主要按钮</el-button>
    </div>

  </div>
</template>

<script>

export default {

    data () {
        return {
            center: {lng: 112.887363, lat: 28.233269},  //经纬度
            zoom: 15,　 //地图展示级别
            infoWindow: {
                show: true,
                contents: '联系电话：400-885-6022'
            }
        }
    },
    methods: {
        handler ({BMap, map}) {
            this.center.lng = 112.887363
            this.center.lat = 28.233269
            this.zoom = 19
        },
        infoWindowClose (e) {
            this.infoWindow.show = false
        },
        infoWindowOpen (e) {
            this.infoWindow.show = true
        }
    }
    }
</script>

<style lang="less" scoped>
.map {
    width: 100%;
    height: 600px; //必须给容器指高度，要不然地图将显示在一个高度为0的容器中，自然看不到
    /deep/ .anchorBL {  //隐藏左下角百度地图logo
        display: none;
    }
}

.banner_bg {
    width: 100%;
    height: 560px;
    position: absolute;
    left: 0;
    top: 0;
}
.about_item{
    color: #fff;
    height:560px;
    .about_center {
        position: absolute;
        height:560px;
        left: 50%;
        top: 0;
        width: 1600px;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        .about_left {
            
            display: flex;
            flex-direction: column;
            .about_title {
            color: #fff;
            font-size: 60px;
            margin-bottom: 20px;
            }
            .about_content {
            color: #fff;
            font-size: 30px;
            font-weight: 300;
            margin-top: 10px;
            }
        }
    }
}
.section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.section1 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F8FBFF;
}
.section2 {
    background: url('../../assets/img/contect.png');
    margin-top: -20px;
    text-align: center;
    width: 100%;
    height: 80px;
}
.center {
  width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0 ;
}
.title {
  color: #333;
  margin: 0 0 60px;
  font-size: 28px;
  font-weight: 300;
}
p{
    margin-top: 10px;
    line-height: 30px;
    text-align: left;
}

.synopsisImg{
    width: 1280px;
}
.honour_box{
    display: flex;
    margin: 10px 0;
    justify-content:center;
    width: 100%;
    .honour_card{
      width: 44%;
      height: 450px;
      background: #fff;
      margin: 10px 20px;
      border: 1px solid #0068f7;
      .honour_up{
        width: 100%;
        text-align: center;
        .honour_img{
          padding: 10px 0 5px 0;
        }
        .honour_title{
          font-size: 18px;
          margin: 0;
        }

      }
      .honour_down{
        width: 90%;
        margin: 0 5%;
        padding: 10px 0 10px 0 ;
        text-align: left;
      }
    }
  }
  .honor_details{
    line-height: 15px;
  }
  .au_but{
    margin: 25px;
    background:  linear-gradient(0deg, #1361FB,#5670B2);
    border: 0;
    color: #fff;
  }
  .au_but:hover{
    background:  #40a9ff;
    border: 0;
  }
</style>